<% extends "common/msui.html" %>
<% block title %>首页<% endblock %>
<% set images = _pool['product.template'].get_images_for_index() %>
<% set events = _pool['product.template'].get_events_for_index() %>
<% block body %>

<div class="page page-current" id='index'>

  <div class="content">
      <div id="slide_gallery" class="focus">
        <div class="hd">
          <ul></ul>
        </div>
        <div class="bd">
          <ul>
            <% for image in images %>
              <!-- 需要一个维护首页图片的地方 -->
              <li><a href="${image.url | safe}"><img _src="${image.image}"/> </a></li>
            <% endfor %>
          </ul>
        </div>
      </div>

      <div class='header-search'>
        <div class='form' id='searchForm' name='searchForm'>
          <div class='search-word'>
            <input type='text' class='input' autocomplete='off' name='word' id='search-word' placeholder='请输入关键词' />
          </div>
          <div class='submit' href='#' id='search-submit'>
           <span class="ico-search" ></span>
          </div>
        </div>
      </div>

      <div class='index-gallery-categ'>
        <ul>
          <!-- <li><a href='/mshop/products'><span class='icon icon-product'></span><span>全部商品</span> </a></li><li><a href='/mshop/order'><span class='icon icon-order'></span><span>我的订单</span> </a></li><li><a href='#'><span class='icon icon-tuan'></span><span>最新团购</span> </a></li><li><a href='/mshop/brand'><span class='icon icon-ping'></span><span>品牌馆</span> </a></li> -->
          <li><a href='/mshop/products'><span class='icon icon-product'></span><span>全部商品</span> </a></li><li><a href='/mshop/order'><span class='icon icon-order'></span><span>我的订单</span> </a></li><li><a href='/mshop/category'><span class='icon icon-categ'></span><span>产品分类</span> </a></li><li><a href='#'><span class='icon icon-tuan'></span><span>最新团购</span> </a></li>
        </ul>

        <!-- <ul> -->
          <!-- <li><a href='/mshop/category'><span class='icon icon-categ'></span><span>产品分类</span> </a></li><li><a href='/mshop/search'><span class='icon icon-hot-search'></span><span>热门搜索</span> </a></li><li><a href='/mshop/shopping_cart'><span class='icon icon-shopping-cart'></span><span>购物车</span> </a></li><li><a href='/mshop/my'><span class='icon icon-person'></span><span>个人中心</span> </a></li> -->
        <!-- </ul> -->
      </div>

      <!-- 需要获取一个实际的图片墙列表，其中数据结构为[{mode: '', small_1: {url: '', img: ''}, small_2: {url: '', img: ''}, small_3: {url: '', img: ''}}] -->

      <div class='index-gallery-content'>
        <% for event in events %>
          <div class='index-gallery-content-show'>

            <% if event.mode == 'mix' %>
              <div class='index-gallery-content-show-gather_three' >
                <div class='gallery-vertical-big'>
                  <a href='${event.small_3.url}'><img src='${event.small_3.img}' /></a>
                </div><div class='gallery-vertical-small'>
                  <p><a href='${event.small_1.url}'><img src='${event.small_1.img}' /></a></p>
                  <p><a href='${event.small_2.url}'><img src='${event.small_2.img}' /></a></p>
                </div>
              </div>
            <% endif %>

            <% if event.mode == 'horizontal' %>
              <div class='index-gallery-content-show-gather_two' >
                <div>
                  <a href='${event.small_1.url}'><img src='${event.small_1.img}' /></a>
                </div><div >
                  <a href='${event.small_2.url}'><img src='${event.small_2.img}' /></a>
                </div>
              </div>
            <% endif %>

            <% if event.mode == 'single' %>
              <div class='index-gallery-content-show-alone' >
                <div class='gallery-horizontal-big'>
                  <a href='${event.small_1.url}'><img src='${event.small_1.img}' /></a>
                </div>
              </div>
            <% endif %>

          </div>
        <% endfor %>
      </div>

  </div>

  <footer>
    <nav class="bar bar-tab index-footer">
      <a class="tab-item" href="/mshop?tab=index">
        <span class="icon icon-home"></span>
        <span class="tab-label">首页</span>
      </a>
      <a class="tab-item" href="/mshop?tab=cart">
        <span class="icon icon-cart"></span>
        <span class="tab-label">购物车</span>
      </a>
      <a class="tab-item" href="/mshop?tab=my">
        <span class="icon icon-me"></span>
        <span class="tab-label">我的</span>
      </a>
    </nav>
  </footer>

  <script type="application/javascript">

  $(function() {

    var events = ${events | tojson | safe};

    $('#search-word').keydown(function(e) {
      if (e.keyCode === 13) {
        var key = $('#search-word').val();
        $.router.loadPage('/mshop/search?word=' + key);
      }
    });

    // 代码会被多次调用
    $('#search-submit').click(function(e) {
      var key = $('#search-word').val();
      if (key) {
        $.router.loadPage('/mshop/search?word=' + key);
      };
    });

    TouchSlide({
        slideCell: "#slide_gallery",
        titCell: ".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
        mainCell: ".bd ul",
        effect: "left",
        autoPlay: true, //自动播放
        autoPage: true, //自动分页
        switchLoad: "_src" //切换加载，真实图片路径为"_src"
    });

    setTimeout(function() {
        $('.tempWrap').trigger('resize')
    }, 100);

  });
  </script>
</div>
<% endblock %>